<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-row class="top_btn">
        <el-badge :value="12" class="item">
          <el-button type="warning">今日待出库</el-button>
        </el-badge>
        <el-badge :value="12" class="item">
          <el-button type="success">本周待出库</el-button>
        </el-badge>
        <el-badge :value="12" class="item">
          <el-button type="info">全部</el-button>
        </el-badge>
      </el-row>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation>
        <div slot="left">
          <el-row>
            <el-col :span="3" style="margin:5px;">
              <el-input placeholder="患者姓名" style="width:150px;display:inline-block;" suffix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-input placeholder="诊所名称" style="width:150px;display:inline-block;" suffix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-select v-model="value9" placeholder="诊疗阶段">
                <el-option label="P1" value="shanghai"></el-option>
                <el-option label="P1" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-date-picker style="width:150px;display:inline-block;" type="date" placeholder="发货期限" suffix-icon="el-icon-date"></el-date-picker>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-input placeholder="主治医生" style="width:150px;display:inline-block;" suffix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-select v-model="value9" placeholder="订单类型">
                <el-option label="P1" value="shanghai"></el-option>
                <el-option label="P1" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-select v-model="value9" placeholder="矫治器名称">
                <el-option label="P1" value="shanghai"></el-option>
                <el-option label="P1" value="beijing"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" style="margin:5px;">
              <el-input placeholder="物流单号" style="width:150px;display:inline-block;" suffix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="6" style="margin:5px;">
              <el-button class="filter-item" size="mini" type="success" icon="el-icon-search">搜索</el-button>
              <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left">重置</el-button>
              <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download">导出</el-button>
            </el-col>
          </el-row>
        </div>
      </crudOperation>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="patientName" width="150" sortable label="所属区域"></el-table-column>
        <el-table-column prop="parentProfession" width="150" sortable label="所属销售"></el-table-column>
        <el-table-column prop="parentProfession1" width="150" sortable label="诊所省份"></el-table-column>
        <el-table-column prop="parentProfession2" width="150" sortable label="诊所城市"></el-table-column>
        <el-table-column prop="parentProfession3" width="150" sortable label="诊所名称"></el-table-column>
        <el-table-column prop="parentProfession4" width="150" sortable label="所属集团"></el-table-column>
        <el-table-column prop="parentProfession5" width="150" sortable label="诊所性质"></el-table-column>
        <el-table-column prop="parentProfession6" width="150" sortable label="患者姓名"></el-table-column>
        <el-table-column prop="parentProfession7" width="150" sortable label="患者编号"></el-table-column>
        <el-table-column prop="createDate1" width="150" sortable label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gender" sortable label="性别">
          <template slot-scope="scope">
            {{ dict.label.gender[scope.row.gender] }}
          </template>
        </el-table-column>
        <el-table-column prop="parentProfession8" width="150" sortable label="患者标签"></el-table-column>
        <el-table-column prop="parentProfession9" width="150" sortable label="主治医生"></el-table-column>
        <el-table-column prop="createDate2" width="150" sortable label="提交时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parentProfession10" width="150" sortable label="病例编号"></el-table-column>
        <el-table-column prop="parentProfession11" width="150" sortable label="牙模类型"></el-table-column>
        <el-table-column prop="createDate3" width="150" sortable label="牙模收到时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parentProfession12" width="150" sortable label="报告状态"></el-table-column>
        <el-table-column prop="createDate4" width="150" sortable label="报告上传时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parentProfession13" width="150" sortable label="诊断结果"></el-table-column>
        <el-table-column prop="parentProfession14" width="150" sortable label="订单编号"></el-table-column>
        <el-table-column prop="parentProfession15" width="150" sortable label="订单类型"></el-table-column>
        <el-table-column prop="parentProfession16" width="150" sortable label="费用类型"></el-table-column>
        <el-table-column prop="createDate5" width="150" sortable label="医生确认制作时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="parentProfession17" width="150" sortable label="套餐名称"></el-table-column>
        <el-table-column prop="parentProfession18" width="150" sortable label="套餐状态"></el-table-column>
        <el-table-column prop="parentProfession19" width="150" sortable label="诊疗阶段"></el-table-column>
        <el-table-column prop="parentProfession20" width="150" sortable label="当前矫治器类型"></el-table-column>
        <el-table-column prop="parentProfession21" width="150" sortable label="诊疗状态"></el-table-column>
        <el-table-column prop="parentProfession22" width="150" sortable label="患者状态"></el-table-column>
        <el-table-column prop="parentProfession23" width="150" sortable label="物流状态"></el-table-column>
        <el-table-column prop="parentProfession24" width="150" sortable label="发货期限"></el-table-column>
        <el-table-column prop="parentProfession25" width="150" sortable label="出库单"></el-table-column>
        <el-table-column prop="parentProfession26" width="150" sortable label="物流单号"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleOutput(scope.row)">出库单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
  </div>
</template>

<script>
import crudPatient from '@/api/patient';
import CRUD, { presenter, header, form, crud } from '@crud/crud';
// import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
// import udOperation from '@crud/UD.operation';
import pagination from '@crud/Pagination';
// import DateRangePicker from '@/components/DateRangePicker';
import { mapGetters } from 'vuex';

const defaultForm = { id: null, patientName: null, gender: null, birthDay: null, compliance: null, parent: null, relationship: null, parentProfession: null, parentMobile: null, orthodonticHis: null, createDate: null, doctorId: null, clinicId: null, deptId: null, tags: null, star: null, photoUrl: null, productRuleId: null, packageRuleId: null, archived: null };
export default {
  name: 'Patient',
  components: { pagination, crudOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['gender', 'patient_compliance', 'patient_parent_rel', 'patient_archive'],
  cruds() {
    return CRUD({
      title: 'PatientService',
      url: '/patient/queryPage',
      sort: 'id,desc',
      crudMethod: { ...crudPatient },
      props: { searchToggle: false },
      optShow: { add: true, download: false }
    });
  },
  data() {
    return {
      rules: {
      },
      value9: ''
    };
  },
  computed: {
    ...mapGetters([
      'menusMap',
      'autoPath',
      'menusCode',
      'codes',
      'searchInfo'
    ])
  },
  watch: {
    searchInfo(newVal, oldVal) {
      console.warn(newVal.name, '||', oldVal.name);
    }
  },
  mounted() {},
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    searchButton(item) {
      console.warn(item.code, item.name);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .head-container {
    .top_btn{
      margin-bottom: 10px;
      .item {
        margin-top: 10px;
        margin-right: 30px;
      }
    }
    .search-tools {
      .tools-all {
        //   margin-top:10px;
        vertical-align: top;
      }
      .tools-right {
        display: inline-block;
        border-left: 1px solid #e6e6e6;
        padding-left: 10px;
        .tools-group {
          .group-btns {
            display: inline-block;
            margin-left: 30px;
            margin-bottom: 20px;
            .btn {
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
}
.crud-opts{
  align-items: flex-end;
  .crud-opts-right{
    width: 200px;
  }
}
</style>
